<template>
	<div id="content">
		<div id="imfo">
			<div class="banner">
				<ul class="clearfix">
					<li>
						<img src="../assets/img/banner.png" alt="" />
					</li>
					<li>
						<img src="../assets/img/banner.png" alt="" />
						<!-- <img src="../assets/img/banner2.jpg" alt="" /> -->
					</li>
					<li>
						<img src="../assets/img/banner.png" alt="" />
					</li>
					<li>
						<img src="../assets/img/banner.png" alt="" />
					</li>
				</ul>
			</div>
			<div class="tabbable container">
				<!-- 切换 -->
				<div class="row">
					<div class="col-md-8 col-xs-8" style="padding-bottom: 10px;">
						<ul class="pa_t nav nav-tabs row">
							<router-link tag="li" active-class="active" to="/home">
								<div id="tab_t_sq" class="tab_t">
									<a href="javascript:;">最新动态</a>
								</div>
							</router-link>
							<router-link tag="li" active-class="active" to="/home_report">
								<div id="" class="tab_t">
									<a href="javascript:;">本地热点</a>
								</div>
							</router-link>
						</ul>
					</div>

					<div class="col-md-4 col-xs-4">
						<div id="" class="ckqb">
							<a href="javascript:;" style="color: #cecece">查看全部</a>
						</div>
					</div>
				</div>
				<div class="tab-content">
					<div class="tab-pane active active2" id="tab1">
						<router-link 
						class="card line-hr border card-text-7" 
						:to="`/detail/${item._id}?collectionName=news`" 
						v-for="(item,index) of news"
						:key="item._id"
						>
							<div class="card-body">
								<h5 class="card-title">{{item.title}}</h5>
								<p class="card-text-2">{{item.fabushijian}}</p>
								<p class="card-text card-text-2 card-text-7">
									<span>
										<img class="imgq" src="../assets/img/icon(1).png" />
									</span>&nbsp;<span>{{item.dianzan}}</span>&nbsp;
									<span>
										<img class="imgq" src="../assets/img/icon(2).png" />
									</span>&nbsp;<span>{{item.shoucang}}</span>&nbsp;
									<span>
										<img class="imgq" src="../assets/img/icon(3).png" />
									</span>&nbsp;<span>{{item.dianzan}}</span>&nbsp;
								</p>
							</div>
						</router-link>
						<div style="height: 3.8em"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery';
	import Swipe from '../assets/js/swipe.js';
	// import axios from 'axios';
	// import axios from '../plugins/axios.js';
	export default {

		name: 'home',
		props: {},
		data() {
			return {
				news: {},
			};
		},
		components: {},
		mounted() {
			new Swipe($('.banner')[0], {
				auto: 1500,
				continuous: true,
				stopPropation: true,
				callback: function(index, element) {
					$('.banner ol li').removeClass('active');
					$('.banner ol li')
						.eq(index)
						.addClass('active');
				}
			});

			// this.$axios({
			// 	url: '/api/list/news',
			// }).then(
			// 	res => console.log("data1", res)
			// )
			this.$axios.all([
				this.$axios.get('/api/list/news'),
			]).then(
				this.$axios.spread((news) => { //所有数据回来，在渲染页面
					this.news = news.data;
					console.log(this.news)
				})
			)
		},
		updated() {},
		methods: {}
	};
</script>

<style scoped>
	.card-text-7 {
		/* background: #007AFF; */
		padding-bottom: 5px ;
		border-bottom: 1px #ddd dashed;
	}

	.content .banner {
		margin-top: 0.6rem;
		position: relative;
		overflow: hidden;
		z-index: 1;
	}

	.banner ul li {
		padding-top: 20px;
		width: 6.4rem;
		float: left;
		position: relative;
	}

	.banner ul li img {
		width: 100%;
		display: block;
	}

	.banner ul li .text-box {
		width: 5.8rem;
		padding: 0 0.3rem;
		height: 1.24rem;
		position: absolute;
		left: 0;
		bottom: 0;
		color: #fff;
		background: rgba(0, 0, 0, 0.5);
	}

	a {
		text-decoration: none;
		color: #333;
	}

	.headlunbo {
		/* height: 15em; */
		width: 100%;
		/* background-color: #007aff; */
	}

	.swiper-container {
		width: 100%;
		height: 100%;
		margin: auto;
	}

	.swiper-slide {
		text-align: center;
		font-size: 18px;
		background: #fff;
		/* Center slide text vertically */
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
	}

	.img_b {
		width: 100%;
		height: 100%;
	}

	.tabbable {
		line-height: 1.2em;
		padding-top: 0em;
	}

	.tab_t {
		font-weight: 600;
		font-size: 1.2em;
		margin-top: 0.7em;
		margin-left: 1.2em;
		padding-bottom: 0.6em;
	}

	.pa_t {
		position: relative;
	}

	.pa_t>li {
		width: 7em;
		/* background-color: #007AFF; */
	}

	.tab_t>a {
		color: #343434 !important;
		text-decoration: none;
	}

	.active {
		color: #43a1f8 !important;
		/* border-bottom: 0.2px solid #007AFF;
				 /* background-color: #4ea2f2; */
	}

	.active::after {
		content: "";
		width: 20%;
		display: block;
		margin: 0 auto;
		border-bottom: 0.3em solid #007aff;
	}

	.active2::after {
		border-bottom: 0em solid #007aff;
	}

	.ckqb {
		width: 7em;
		height: 2em;
		background-color: #ffffff;
		border: 1px solid #cecece;
		color: #cecece;
		border-radius: 5em;
		font-size: 0.85em;
		text-align: center;
		line-height: 1.7em;
		margin: auto;
		margin-top: 0.8em;
	}

	.nav-tabs {
		border-bottom: 0px !important;
	}

	.line-hr {
		border-bottom: 1px solid #eaeaea;
	}

	.card-text {
		margin-bottom: 0.4em;
	}

	.imgq {
		width: 1.3em;
		height: 1.1em;
	}

	.card-text-2 {
		color: #898989;
	}

	.card-title {
		display: inline-block;
		margin-top: 5px;
		margin-bottom: 5px;
		white-space: nowrap;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #353535 !important;
	}
</style>
